<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item>
        <router-link :to="'/customer'">
          <el-button type="info" icon="el-icon-back">返回</el-button>
        </router-link>
        <div style="height:15px"></div>
        <template>
          <el-row :gutter="20">
            <el-col :span="6"
              ><div
                class="grid-content bg-purple-light"
                style="padding: 0 0 0 10px"
              >
                <i class="el-icon-menu">基础信息</i>
              </div></el-col
            >
          </el-row>
          <el-row :gutter="20" v-model="list">
            <el-col :span="6"
              ><div class="grid-content bg-purple" style="padding: 0 0 0 20px">
                用户id: {{ list.userId }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple" style="padding: 0 0 0 20px">
                微信昵称: {{ list.vxName }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple" style="padding: 0 0 0 20px">
                会员手机: {{ list.telNumber }}
              </div></el-col
            >
          </el-row>
          <el-row :gutter="20" v-model="list">
            <el-col :span="6"
              ><div class="grid-content bg-purple" style="padding: 0 0 0 20px">
                注册时间: {{ list.registrationTime }}
              </div></el-col
            >
            <el-col :span="12"
              ><div class="grid-content bg-purple" style="padding: 0 0 0 20px">
                用户备注: {{ list.userNote }}
              </div></el-col
            >
          </el-row>
        </template>
        <el-row :gutter="20">
          <el-col :span="6"
            ><div
              class="grid-content bg-purple-light"
              style="padding: 0 0 0 10px"
            >
              <i class="el-icon-menu">课程购买记录</i>
            </div></el-col
          >
        </el-row>
        <template>
          <el-table :data="list.courseOrder" border style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
            </el-table-column>
            <el-table-column prop="courseManagmentEntity.name" label="课程名称" width="180">
            </el-table-column>
            <el-table-column prop="money" label="订单金额（元）">
            </el-table-column>
            <el-table-column prop="orderState" label="订单状态"> </el-table-column>
            <el-table-column prop="createTime" label="提交时间"> </el-table-column>
            <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
            <router-link :to="'/listorder/details/' + scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit"
                >查看订单</el-button
              >
            </router-link>
          </template>
        </el-table-column>
          </el-table> 
        </template>
        <div style="height:15px"></div>
        <el-row :gutter="20">
          <el-col :span="6"
            ><div
              class="grid-content bg-purple-light"
              style="padding: 0 0 0 10px"
            >
              <i class="el-icon-menu">活动参加记录</i>
            </div></el-col
          >
        </el-row>
        <template>
          <el-table :data="list.activityOrderEntity" border style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
            </el-table-column>
            <el-table-column prop="activity.name" label="活动名称" width="180">
            </el-table-column>
            <el-table-column prop="childName" label="孩子姓名">
            </el-table-column>
            <el-table-column prop="telphone" label="联系电话"> </el-table-column>
            <el-table-column prop="money" label="报名费"> </el-table-column>
            <el-table-column prop="orderState" label="订单状态"> </el-table-column>
            <el-table-column prop="payTime" label="支付时间"> </el-table-column>
            <el-table-column prop="payType" label="支付方式"> </el-table-column>
            <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <router-link :to="'/activityOrderDetails/' + scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit"
                >查看订单</el-button
              >
            </router-link>
          </template>
        </el-table-column>
          </el-table> 
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import customerApi from "@/api/customerShow";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";

export default {
  components: { PanThumb, ImageCropper },
  data() {
    return {
      options: [],
      list: {},
      id: 0,
    };
  },
  created() {
    //页面渲染之前执行
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
    },
  },
  methods: {
    init() {
      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        this.id = this.$route.params.id;
        //调用根据id查询的方法
        this.getInfo(this.id);
      }
    },
    //根据用户id查询的方法
    getInfo(id) {
      customerApi.editCustomerShow(id).then((response) => {
        console.log(response);
        this.list = response.object;
        console.log(this.list.courseOrder);
      });
    },
    // saveOrUpdate() {
    //   //判断修改还是添加
    //   //根据头条是否有id
    //   if (!this.addData.id) {
    //     //添加
    //     this.addHeadLine();
    //   } else {
    //     //修改
    //     this.updateHeadLine();
    //   }
    // },
    // //修改头条的方法
    // updateHeadLine() {
    //   customerApi.updateHeadLine(this.addData).then((response) => {
    //     //提示信息
    //     this.$message({
    //       type: "success",
    //       message: "修改成功!",
    //     });
    //     //回到列表页面 路由跳转
    //     this.$router.push({ path: "/list/headLine" });
    //   });
    // },
    // //添加头条的方法
    // addHeadLine() {
    //   customerApi.addHeadLine(this.addData).then((response) => {
    //     //添加成功
    //     //提示信息
    //     this.$message({
    //       type: "success",
    //       message: "添加成功!",
    //     });
    //     //回到列表页面 路由跳转
    //     this.$router.push({ path: "/list/headLine" });
    //   });
    // },
  },
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
